<script setup lang="ts">
// 定义客户案例数据
const cases = ref([
  {
    id: 1,
    clientName: '制造企业A',
    solution: '智能工厂解决方案',
    result: '生产效率提升30%',
    description: '通过部署我们的智能工厂解决方案，该企业成功实现了生产自动化，效率显著提升。',
    bgColor: 'bg-blue-500',
    hoverColor: 'group-hover:text-blue-600',
  },
  {
    id: 2,
    clientName: '科技公司B',
    solution: '机器人控制系统',
    result: '成本降低25%',
    description: '采用我们的机器人控制系统后，该公司大幅降低了人工成本，提高了产品质量。',
    bgColor: 'bg-green-500',
    hoverColor: 'group-hover:text-green-600',
  },
  {
    id: 3,
    clientName: '工厂C',
    solution: '数据分析平台',
    result: '决策效率提升40%',
    description: '通过数据分析平台，该工厂实现了实时监控和智能决策，大幅提升了管理效率。',
    bgColor: 'bg-purple-500',
    hoverColor: 'group-hover:text-purple-600',
  },
])
</script>

<template>
  <!-- 客户案例 -->
  <section id="cases" class="section w-full bg-white py-16">
    <div class="mx-auto max-w-[2000px] w-full px-4 lg:px-16 md:px-8">
      <div class="mb-12 text-center">
        <h2 class="mb-4 text-3xl font-bold lg:text-4xl">
          <span
            class="from-green-600 via-blue-600 to-purple-600 bg-gradient-to-r bg-clip-text text-transparent"
          >客户案例</span>
        </h2>
        <p class="text-center text-lg text-gray-600">
          我们为众多企业提供了优质的解决方案，帮助他们实现数字化转型
        </p>
      </div>

      <div class="grid grid-cols-1 gap-8 lg:grid-cols-3 md:grid-cols-2">
        <!-- 循环生成案例卡片 -->
        <div
          v-for="caseItem in cases"
          :key="caseItem.id"
          class="group overflow-hidden border border-gray-100 rounded-2xl bg-white shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2"
        >
          <div class="h-48 flex items-center justify-center" :class="[caseItem.bgColor]">
            <div class="transform text-center text-white transition-transform duration-300 group-hover:scale-105">
              <h3 class="text-xl font-bold">
                {{ caseItem.clientName }}
              </h3>
              <p class="mt-2">
                {{ caseItem.solution }}
              </p>
            </div>
          </div>
          <div class="p-6">
            <h3 class="mb-3 text-xl text-gray-900 font-bold transition-colors" :class="[caseItem.hoverColor]">
              {{ caseItem.result }}
            </h3>
            <p class="text-gray-600 leading-relaxed">
              {{ caseItem.description }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
